<div id="ParticleBox" class="box" style="left:30px;top:45px;width:200px;height:310px;">
	<center>
	<div class="topBar"><font class="topBarHeader">Particle List</font></div>

	<table>
	<td width=50 align="center">
	<text class="parameter">from <br/>Dir</text>
	<div id="LoadParticleListXML" class="smallButton" 
	onMouseOver="document.getElementById('Help').innerHTML='<b>Load dir</b> Load a directory full of subtomograms.';" onMouseOut="document.getElementById('Help').innerHTML='';"
	onclick="innerHTMLFromFileInputOverlay(document.getElementById('overlayBox'),'loadParticleList.py','DIR','Particles','Select <b>directory with subtomograms</b> <br/> Provide full path','pytom_particleListDIR')">
		load
	</div></td>
	<td width=50 align="center">
	<text class="parameter">from <br/>XML</text>
	<div id="LoadParticleListXML" class="smallButton" 
	onMouseOver="document.getElementById('Help').innerHTML='<b>from XML</b> Load an existing XML File.';" onMouseOut="document.getElementById('Help').innerHTML='';"
	onclick="innerHTMLFromFileInputOverlay(document.getElementById('overlayBox'),'loadParticleList.py','XML','Particles','Select <b>particle list xml</b> file<br/> Provide full path','pytom_particleListXML')">
		load
	</div>
	</td>
	<td width=50 align="center">
	<text class="parameter">from <br/>Alig</text>
	<div id="LoadParticleListXML" class="smallButton" 
	onMouseOver="document.getElementById('Help').innerHTML='<b>Load Alig</b> Load an existing Alignment List<br/> <i>A list generated during preceeding alignment rounds</i>.';" onMouseOut="document.getElementById('Help').innerHTML='';"
	onclick="alert('Not supported here yet...');">
		load
	</div>
	</td>
	</table>
	<br/>
	<div id="Particles" class="particles">
	
	</div>
	</center>
</div>

<div id="ReferenceBox" class="box" style="left:255px;top:45px;width:180px;height:150px;">
	<center>
	<div class="topBar"><font class="topBarHeader">Reference</font></div>

		<div id="LoadReference" class="smallButton" 
		onMouseOver="document.getElementById('Help').innerHTML='<b>Load</b> Load a reference.';" onMouseOut="document.getElementById('Help').innerHTML='';"
		onclick="imageFromFileInputOverlay(document.getElementById('overlayBox'),'imageSlice.py','File','ReferenceIMG','Set path to <b>reference</b> file<br/> Provide full path','pytom_referenceFile');">
			load
		</div>

		<div id="Reference">
		
			<img id="ReferenceIMG" src="" width="100" height="100" border="0"/>
		</div>
	</center>
</div>

<div id="MaskBox" class="box" style="left:255px;top:205px;width:180px;height:150px;">
	<center>
	<div class="topBar"><font class="topBarHeader">Mask</font></div>
	<div id="LoadMask" class="smallButton" 
	onMouseOver="document.getElementById('Help').innerHTML='<b>Load</b> Load a mask.';" onMouseOut="document.getElementById('Help').innerHTML='';"
	onclick="imageFromFileInputOverlay(document.getElementById('overlayBox'),'imageSlice.py','File','MaskIMG','Set path to <b>mask</b> file<br/> Provide full path','pytom_maskFile');">
		load
	</div>
	<div id="Mask">
	
		<img id="MaskIMG" src="" width="100" height="100" border="0"/>
	</div>
	</center>
</div>

<div id="AngleBox" class="box" style="left:460px;top:45px;width:380px;height:150px;">
	<center>
	<div class="topBar"><font class="topBarHeader">Sampling Angles</font></div>
	
	<text class="parameter">
    	<input type="radio" id="SamplingGlobal" name="SamplingMethod" value="Global" onMouseOver="document.getElementById('Help').innerHTML='Global sampling to scan all posible orientations of your particles. <br/>Note: also set local sampling parameters after the first global iteration!';" onMouseOut="document.getElementById('Help').innerHTML='';"> Global Search</input>
    	<input type="radio" id="SamplingLocal" name="SamplingMethod" value="Local" onMouseOver="document.getElementById('Help').innerHTML='Refine known particle angles and shifts locally.';" onMouseOut="document.getElementById('Help').innerHTML='';"> Local Search</input>
	</text>
	</center>
	<table border="0" class="angleSampling">
	<tr><td><b>Global Sampling</b></td><td><b>Local Sampling</b></td></tr>
	<tr><td>
	<select id="AngleList" onMouseOver="document.getElementById('Help').innerHTML='<b>Rotation List</b> Specify a list of orientations for global search.';" onMouseOut="document.getElementById('Help').innerHTML='';">>
		<option>Rotation Lists</option>
    	<option value="angles_50_100.em" >100 rotations - 50&deg; Inc.</option>
    	<option value="angles_38.53_256.em" >256 rotations - 39&deg; Inc.</option>
    	<option value="angles_35.76_320.em" >320 rotations - 36&deg; Inc.</option>
    	<option value="angles_25.25_980.em" >980 rotations - 26&deg; Inc.</option>
    	<option value="angles_19.95_1944.em" >1944 rotations - 20&deg; Inc.</option>
    	<option value="angles_18_3040.em" >3040 rotations - 18&deg; Inc.</option>    
    	<option value="angles_12.85_7112.em" >7112 rotations - 12&deg; Inc.</option>    
    	<option value="angles_11_15192.em" >15192 rotations - 11&deg; Inc.</option>    
    	<option value="angles_07_45123.em" >45123 rotations - 7&deg; Inc.</option>
    	<option value="angles_3_553680.em" >553680 rotations - 3&deg; Inc.</option>
    </select>
    </td>
    <td>
    <text class="parameter">Start Increment</text><br/>
    <input type="text" id="AngleStartIncrement" value="10" size='10' maxlength='500'
    onMouseOver="document.getElementById('Help').innerHTML='Angular sampling increment.';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
    </td><td>
    <text class="parameter">Number Shells</text> <br/>
    <input type="text" id="AngleNumberShells" value="2" size='10' maxlength='500' 
    onMouseOver="document.getElementById('Help').innerHTML='Number of shells around the know rotation.';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
    </td>
    </td>
    <tr>
    <td></td>
    <td>
    <text class="parameter">Shell Increment</text><br/>
    <input type="text" id="AngleShellIncrement" value="10" size='10' maxlength='500' 
    onMouseOver="document.getElementById('Help').innerHTML='Optional! Incerment between shells. Inplane rotation search.';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
    </td>
    </tr>

    
	</table>
</div>

<div id="BandpassBox" class="box" style="left:460px;top:205px;width:380px;height:60px;">
	
	<center>
	<div class="topBar"><font class="topBarHeader">Bandpass</font></div>
	<table border="0">
	<td>
	<center>
		<text class="parameter">Lowest Frequency</text><br/>
    	<input type="text" id="LowestFrequency" value="0" size='10' maxlength='500'
    	onMouseOver="document.getElementById('Help').innerHTML='Lowest frequency of bandpass. <br/> Value in pixels! (between 0 - size of cube/2 (Determines bandpass by pixel)).';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
    </center>
    </td><td>
    <center>
    	<text class="parameter">Highest Frequency</text><br/>
    	<input type="text" id="HighestFrequency" value="1" size='10' maxlength='500'
    	onMouseOver="document.getElementById('Help').innerHTML='Highest frequency of bandpass. <br/> Value in pixels! (between 0 - size of cube/2 (Determines bandpass by pixel value)).';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
    </center>
    </td><td>
    <center>
    	<text class="parameter">Smoothing</text><br/>
    	<input type="text" id="FilterSmooth" value="0" size='10' maxlength='500'
    	onMouseOver="document.getElementById('Help').innerHTML='Smoothing at the edges of filter.<br/> Can be 0 (off) or a pixel value.';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
    	</text>
    </center>
    </td>
    </table>
   	</center>
</div>

<div id="AdaptiveParameters" class="box" style="left:460px;top:275px;width:380px;height:80px;">
	<center>
	<div class="topBar"><font class="topBarHeader">Adaptive Parameters</font></div>
	
	<text class="parameter">
		<input type="radio" id="AdaptiveSamplingOn" name="AdaptiveSampling" value="True" onMouseOver="document.getElementById('Help').innerHTML='Enable adaptive alignment parameters. <br/> (angle increment and bandpass will adapt to current resolution)';" onMouseOut="document.getElementById('Help').innerHTML='';">On</input>
    	<input type="radio" id="AdaptiveSamplingOff" name="AdaptiveSampling" value="False" onMouseOver="document.getElementById('Help').innerHTML='Disable.';" onMouseOut="document.getElementById('Help').innerHTML='';">Off</input>
	</text>
	
	<table border="0">
	<td>
		<text class="parameter">Resolution Cutoff</text><br/>
    	<input type="text" id="CCutoff" value="0.5" size='10' maxlength='500'
    	onMouseOver="document.getElementById('Help').innerHTML='Lowest frequency of bandpass in pixels! (between 0 - size of cube/2).';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
	</td><td>
    	<text class="parameter">Resolution Offset</text><br/>
    	<input type="text" id="deltaR" value="0.1" size='10' maxlength='500'
    	onMouseOver="document.getElementById('Help').innerHTML='Highest frequency of bandpass in pixels! (between 0 - size of cube/2).';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
	</td><td>
    	<text class="parameter">Angle Factor</text><br/>
    	<input type="text" id="angleFactor" value="0.5" size='10' maxlength='500'
    	onMouseOver="document.getElementById('Help').innerHTML='Factor for scalling the adative angle';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
	</td>
	</table>
	
	</center>
</div>

<div id="SampleInfo" class="box" style="left:30px;top:365px;width:200px;height:225px;">

	<center>
		<div class="topBar"><font class="topBarHeader">Sample Information</font></div>
		<div id='pixelSizeBox' class="subbox" style="left:0px;top:10px;width:180px;height:45px;">
			<div class="subBar"><font class="subBarHeader">Pixel Size</font></div>
			
			<input type="text" id="pixelSize" value="" size='10' maxlength='10' onMouseOver="document.getElementById('Help').innerHTML='Specify pixelsize in Angstrom';" onMouseOut="document.getElementById('Help').innerHTML='';"/>
		</div>
	
		<div id='diameterBox' class="subbox" style="left:0px;top:15px;width:180px;height:45px;">
			<div class="subBar"><font class="subBarHeader">Particle Diameter</font></div>
			<input type="text" id="particleDiameter" value="" size='10' maxlength='10' onMouseOver="document.getElementById('Help').innerHTML='Specify particle diameter in Angstrom';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
		</div>
		
		<div id="wedgeInfoBox" class="subbox" style="left:0px;top:20px;width:180px;height:65px;">
			<div class="subBar"><font class="subBarHeader">Wedge Info</font></div>
			<table border="0">
				<td>
					<text class="parameter">Angle 1</text><br/>
			    	<input type="text" id="Wedge1" value="0" size='5' maxlength='10'
			    	onMouseOver="document.getElementById('Help').innerHTML='<b>Angle1</b>: Specify first tilt angle (for a tilt to 60 you would specify [90-60=30] ).';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
				</td><td>
			    	<text class="parameter">Angle 2</text><br/>
			    	<input type="text" id="Wedge2" value="0" size='5' maxlength='10'
			    	onMouseOver="document.getElementById('Help').innerHTML='<b>Angle2</b>: Specify second tilt angle (for a tilt to 60 you would specify [90-60=30] ).';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
				</td>
			</table>
		</div>
	</center>
</div>
	
</div>

<div id="IterationBox" class="box" style="left:460px;top:365px;width:380px;height:100px;">
	<center>
	<div class="topBar"><font class="topBarHeader">Iterations</font></div>
	
	<table border="0">
	<tr>
	<td>
		<text class="parameter">Destination Directory</text>
	</td>
	<td>
    	<div id="SetResDir" class="smallButton" onclick="setCookieFromOverlay(document.getElementById('overlayBox'),'Select directory for alignment results','pytom_destination')" 
    										    onMouseOver="document.getElementById('Help').innerHTML='Destination where result data will be written.';" onMouseOut="document.getElementById('Help').innerHTML='';">
			set
		</div>
	</td>
	</tr>
	<tr>
	<td>
		<text class="parameter">Number Iterations</text>
	</td><td>
		<input type="text" id="numberIterations" value="" size='3' maxlength='1000'
    	onMouseOver="document.getElementById('Help').innerHTML='Total number of alignment iterations';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
	</td>
	</tr>
	<tr>
	<td>
		<text class="parameter">Binning</text>
	</td><td>
		<input type="text" id="binning" value="1" size='3' maxlength='1000'
    	onMouseOver="document.getElementById('Help').innerHTML='Bin subtomograms during processing.1 is default, it will combine 1 pixel to 1 pixel (identity -> no operation).<br/>2 will bin 2 pixels to 1, subtomograms will be half size during processing. <br/>3 : 3 -> 1 , 4: 4 -> 1, ...<br/> Average will be calculated on original sized cubes!';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
	</td>
	</tr>
	</table>
	
	</center>
	
</div>


<div id="ScoreBox" class="box" style="left:255px;top:365px;width:180px;height:100px;">
	<center>
	<div class="topBar"><font class="topBarHeader">Score</font></div><br/>
	
	<select id="ScoreList" name="ScoreList" onMouseOver="document.getElementById('Help').innerHTML='Select a score function.';" onMouseOut="document.getElementById('Help').innerHTML='';">
    	<!--<option value="xcf" >XCF</option>
    	<option value="nxcf" >NXCF</option>-->
    	<option value="flcf" >FLCF</option>
    	<!--<option value="wcf" >WCF</option>
    	<option value="mcf" >MCF</option>-->
    </select>

	</center>
</div>


<div id="PeakPriorBox" class="box" style="left:255px;top:480px;width:180px;height:110px;">
	<center>
		<div class="topBar"><font class="topBarHeader">Peak Prior</font></div><br/>
		<table border="0">
			<tr>
			<td><text class="parameter">Radius</text></td><td>
				<input type="text" id="peakPriorRadius" value="-1" size='5' maxlength='100'
    			onMouseOver="document.getElementById('Help').innerHTML='Number of voxels each score value will be multiplied by 1. -1 means disabled';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
			</td></tr>
			<tr>
			<td><text class="parameter">Smooth</text></td><td>
				<input type="text" id="peakPriorSmooth" value="-1" size='5' maxlength='100'
    			onMouseOver="document.getElementById('Help').innerHTML='Number of voxels for smoothing before 0 is multiplied to score.  -1 means disabled';" onMouseOut="document.getElementById('Help').innerHTML='';"/><br/>
			</td></tr>
		</table>
	</center>
</div>

<div id="CheckParamtersButton" class="bigButton" style="position:absolute;top:480;left:740;" onClick="updateAlignmentCookiesFromPage(document);checkAlignmentParameters(document.getElementById('overlayBox'))" onMouseOver="document.getElementById('Help').innerHTML='Check your current setup.';" onMouseOut="document.getElementById('Help').innerHTML='';">
	<div style="position:relative;top:33%;">
		Check Setup
	</div>
</div>

<div id="Submit" class="bigButton" style="position:absolute;top:540;left:740;background-color:#00FF00;" onClick="updateAlignmentCookiesFromPage(document);createAlignmentJobFromParameters();" onMouseOver="document.getElementById('Help').innerHTML='Create alignment job.<br/>Works only when button is green.';" onMouseOut="document.getElementById('Help').innerHTML='';">
	<div style="position:relative;top:33%;">
		Create Job
	</div>
</div>

